<template>
	<view class="page-wrapper message-list linear-back">
		<view class="message-item shadow-border" v-for="message in list" :key="message.id">
			<image v-if="message.type==1" class="icon" src="/static/icons/icon_success.png" mode="aspectFit"></image>
			<image v-else class="icon" src="/static/icons/icon_error.png" mode="aspectFit"></image>
			<view class="info-box">
				<text>{{ message.title }}</text>
				<text class="desc">{{ message.content }}</text>
				<text class="desc">{{ message.datetime }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getMessageListAPi,
	} from "@/api/request";
	import {
		CacheUtils,
	} from '@/utils/index';
	import {
		ref,
	} from "vue";
	import {
		onShow,
		onLoad,
	} from "@dcloudio/uni-app";

	const title = ref(''); // 设备名称
	const imei = ref(''); // 设备id
	const list = ref([]); // 消息列表

	const fetchMessageList = async () => {
		let res = await getMessageListAPi({
			userid: CacheUtils.get('userid'),
			imei: imei.value
		});

		if (res.response.result == true) {
			list.value = res.list
		} else {
			uni.showToast({
				title: res.response.msg,
				icon: 'none'
			});
			list.value = []
		}
	}

	onLoad((query) => {
		imei.value = query.imei
		title.value = query.title
		uni.setNavigationBarTitle({
			title: query.title
		});
	})

	onShow(() => {
		fetchMessageList()
	})
</script>

<style lang="scss" scoped>
.message-list{
	padding: 20rpx 40rpx;
	.message-item{		
		display: flex;
		align-items: center;
		column-gap: 40rpx;
        background-color: #FFFFFF;
        margin-bottom: 30rpx;
        padding: 15rpx 30rpx;
        border-radius: 30rpx;
		
		.icon{
			width: 42rpx;
			height: 42rpx;
		}
		.info-box{
			flex: 1;
			display: inline-flex;
			flex-direction: column;
			row-gap: 4rpx;
			
			.desc{
				font-size: 24rpx;
			}
		}
	}
}
</style>